13-0 js
const App = {
data() {
return {
name: '小明',
text: '一段文字敘述',
checkAnswer: false,
checkAnswer2: '',
checkAnswer3: [],
radioAnswer: '蛋餅',
selectAnswer: '',
selectAnswer2: [],
products: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
{
name: '蘿蔔糕',
price: 30,
vegan: true
},
],
productsObj: {
chineseOmelette: {
name: '蛋餅',
price: 30,
vegan: false
},
riceBall: {
name: '飯糰',
price: 35,
vegan: false
},
soupDumpling: {
name: '小籠包',
price: 60,
vegan: false
}
},
}
},
methods: {
reverseArray: function () {
this.products.reverse();
},
},
};
Vue.createApp(App).mount('#app');
13-1 input及textarea 雙向綁定顯示值
<input type="text" class="form-control" v-model="name">
{{ name }}
<textarea cols="30" rows="3" class="form-control" v-model="text"></textarea>
{{ text }}
13-2 checkbox 單選框
<p>小明,你是吃飽沒?</p>
<p>{{ checkAnswer ? '吃飽了' : '還沒'}}</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" v-model="checkAnswer">
<label class="form-check-label" for="check1">小明回覆</label>
</div>
13-3 checkbox 單選延伸(未使用三元運算子判斷)
<p>小明,你是吃飽沒?</p>
<p>{{ checkAnswer2 }}</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" v-model="checkAnswer2" true-value="吃飽了" false-value="還沒">
<label class="form-check-label" for="check2">小明回覆</label>
</div>
13-4 checkbox 複選框
<!-- 對應js的 checkAnswer3陣列值-->
<p>你還要吃什麼?</p>
<p>{{ checkAnswer3.join(' ') }}</p>
<!-- 以下複選植被點選後,會進入js的checkAnswer陣列內 -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check3" value="蛋餅" v-model="checkAnswer3">
<label class="form-check-label" for="check3">蛋餅</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check4" value="蘿蔔糕" v-model="checkAnswer3">
<label class="form-check-label" for="check4">蘿蔔糕</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check5" value="豆漿" v-model="checkAnswer3">
<label class="form-check-label" for="check5">豆漿</label>
</div>
13-5 radio 單選框
<p>你還要吃什麼?</p>
<p>{{ radioAnswer }}</p>
<!-- 單選綁定 radioAnswer: '蛋餅'單一值,當點選其他選項時,採覆蓋方式產生新值-->
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" value="蛋餅" v-model="radioAnswer">
<label class="form-check-label" for="radio1">蛋餅</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" value="蘿蔔糕" v-model="radioAnswer">
<label class="form-check-label" for="radio2">蘿蔔糕</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio3" value="豆漿" v-model="radioAnswer">
<label class="form-check-label" for="radio3">豆漿</label>
</div>
13-6 select 單選
<p>你還要吃什麼?</p>
<p>{{ selectAnswer }}</p>
<select class="form-select" v-model="selectAnswer">
<option :Value="" disabled>說吧,你要吃什麼?</option>
<option v-for="item in products" :key="item.name" :value="item.name">{{item.name}} / {{item.price}}</option>
</select>
13-7 select 多選
<p>你還要吃什麼?</p>
<p>{{ selectAnswer2 }}</p>
<select class="form-select" multiple v-model="selectAnswer2">
<option selected disabled value="">說吧,你要吃什麼?</option>
<option :value="item.name" v-for="item in products" :key="item.name">
{{item.name}} / {{item.price}} 元</option>
</select>
知識點來源:六角課程
以上是今天所提供知識點如有誤,再請務必在下面留言~